<template>
  <!--访客数据查询-->
  <div class="contentRight" style="background-color: #f0f2f5;height: auto;min-height: 100%;">
    <div class="zhezhaoContentRight" v-if="loadingAllPosition">
      <a-spin tip="加载中..." style="position: fixed;top: 50%;">
      </a-spin>
    </div>
    <div class="zhezhaoContentRight" v-if="allMessageNull != ''">
      <div style="position: fixed;top: 50%;">
        {{allMessageNull}}
      </div>
    </div>

    <a-row :gutter="[10,10]" style="margin: 0 !important;padding-bottom: 10px;">
      <a-col class="gutter-row" :span="allSpan" v-if="allDataShow && isSuper == '是'">
        <div class="gutter-box whiteColor" >
          <a-card size="small" title="访客预约数据汇总" :bordered="false" :bodyStyle="{height:'400px',maxHeight:'400px'}">
            <!--<a slot="extra" href="#"></a>-->
            <template slot="extra"><span style="color: transparent">全部</span></template>
            <a-card
              size="small"
              :bordered="false"
              style="width:100%"
              :tab-list="tabListNoTitle"
              :active-tab-key="noTitleKey"
              @tabChange="onTabChange"

            >

              <div style="padding: 10px;">
                <p style="margin: 0px 0px 10px 0px;font-weight: bold;">{{noTitleName}}: {{dataAll5Number}} 人</p>
              </div>

              <!--自定义加载中-->
              <div class="zhezhaoAllBase" v-if="loadingAll">
                <a-spin tip="加载中...">
                </a-spin>
              </div>
              <!--柱状图-->
              <div id="datasAll" class="chartzhu3" style="height: 250px"></div>

              <template slot="tabBarExtraContent">
                <span class="nowMonth" @click="clickNowMonth">本月</span>
                <a-month-picker :size="'default'" placeholder="请选择月份" style="width: 150px;" :value="nowMonthDate"  @change="onChangeDate"/>
              </template>
            </a-card>

          </a-card>
        </div>
      </a-col>
      <a-col class="gutter-row" :span="antingSpan" v-show="antingShow">
        <div class="gutter-box whiteColor">
            <a-card size="small"  title="安亭基地" :bordered="false" :bodyStyle="{height:'350px',maxHeight:'350px'}">
              <template slot="extra">
                <a-dropdown>
                  <a  class="ant-dropdown-link menuA">
                    {{antingAreaName}}<a-icon type="down" />
                  </a>
                  <a-menu slot="overlay" @click="handleClick">
                    <a-menu-item class="menuA" v-for="item in aningAreaAll" :key="item.id" :value="item.areaName">
                      {{item.areaName}}
                    </a-menu-item>
                  </a-menu>
                </a-dropdown>
              </template>

              <p style="margin-left: 10px;font-weight: bold;">{{noTitleName}}: {{antingPeopleNumber}} 人</p>

              <!--自定义加载中-->
              <div class="zhezhaoBase" v-if="loadingAnting">
                <a-spin tip="加载中...">
                </a-spin>
              </div>

              <div style="width: 100%;height: 200px;text-align: center;line-height: 200px" v-if="antingData5 == null">
                {{errorMessageAnting}}
              </div>
              <!--柱状图-->
              <div v-else id="container" class="chartzhu" style="height: 300px"></div>

            </a-card>
        </div>
      </a-col>
      <a-col class="gutter-row" :span="yinchuanSpan" v-show="yinchuanShow">
        <div class="gutter-box whiteColor">
          <a-card size="small" title="银川基地" :bordered="false"  :bodyStyle="{height:'350px',maxHeight:'350px'}">
            <template slot="extra">
              <a-dropdown>
                <a  class="ant-dropdown-link menuA">
                  {{yinchuanAreaName}}<a-icon type="down" />
                </a>
                <a-menu slot="overlay" @click="handleClickYinchuan">
                  <a-menu-item class="menuA" v-for="item in yinchuanAreaList" :key="item.id" :value="item.areaName">
                    {{item.areaName}}
                  </a-menu-item>
                </a-menu>
              </a-dropdown>
            </template>

            <p style="margin-left: 10px;font-weight: bold;">{{noTitleName}}: {{yinchanPeopleNumber}} 人</p>

            <!--自定义加载中-->
            <div class="zhezhaoBase" v-if="loadingYinchuan">
              <a-spin tip="加载中...">
              </a-spin>
            </div>
            <!--柱状图-->
            <div style="width: 100%;height: 200px;text-align: center;line-height: 200px" v-if="yinchuanData1 == null">
              {{errorMessageYinchuan}}
            </div>

            <div v-else id="containerYinchuan" class="chartzhu" style="height: 300px"></div>
          </a-card>
        </div>
      </a-col>
      <a-col class="gutter-row" :span="taicangSpan"  v-show="taicangShow">
        <div class="gutter-box whiteColor">
          <a-card size="small" title="太仓基地" :bordered="false"  :bodyStyle="{height:'350px',maxHeight:'350px'}">
            <template slot="extra">
              <a-dropdown>
                <a  class="ant-dropdown-link menuA">
                  {{taicangAreaName}}<a-icon type="down" />
                </a>
                <a-menu slot="overlay" @click="handleClickTaicang">
                  <a-menu-item class="menuA" v-for="item in taicangAreaList" :key="item.id" :value="item.areaName">
                    {{item.areaName}}
                  </a-menu-item>
                </a-menu>
              </a-dropdown>
            </template>

            <p style="margin-left: 10px;font-weight: bold;">{{noTitleName}}: {{taicangPeopleNumber}} 人</p>

            <!--自定义加载中-->
            <div class="zhezhaoBase" v-if="loadingTaicang">
              <a-spin tip="加载中...">
              </a-spin>
            </div>
            <!--柱状图-->
            <div style="width: 100%;height: 200px;text-align: center;line-height: 200px" v-if="taicangData == null">
              {{errorMessageTaicang}}
            </div>

            <div v-else id="containerTc" class="chartzhu" style="height: 300px"></div>
          </a-card>
        </div>
      </a-col>
      <a-col class="gutter-row" :span="xiangtanSpan"  v-show="xiangtanShow">
        <div class="gutter-box whiteColor">
          <a-card size="small" title="湘潭基地" :bordered="false"  :bodyStyle="{height:'350px',maxHeight:'350px'}">
            <template slot="extra">
              <a-dropdown>
                <a  class="ant-dropdown-link menuA">
                  {{xiangtanAreaName}}<a-icon type="down" />
                </a>
                <a-menu slot="overlay" @click="handleClickXiangtan">
                  <a-menu-item class="menuA" v-for="item in xiangtanAreaList" :key="item.id" :value="item.areaName">
                    {{item.areaName}}
                  </a-menu-item>
                </a-menu>
              </a-dropdown>
            </template>

            <p style="margin-left: 10px;font-weight: bold;">{{noTitleName}}: {{xiangtanPeopleNumber}} 人</p>

            <!--自定义加载中-->
            <div class="zhezhaoBase" v-if="loadingXiangtan">
              <a-spin tip="加载中...">
              </a-spin>
            </div>
            <!--柱状图-->
            <div style="width: 100%;height: 200px;text-align: center;line-height: 200px" v-if="xiangtanData == null">
              {{errorMessageXiangtan}}
            </div>

            <div v-else id="containerXiangtan" class="chartzhu" style="height: 300px"></div>
          </a-card>
        </div>
      </a-col>

      <a-col class="gutter-row" :span="nanjingSpan"  v-show="nanjingShow">
        <div class="gutter-box whiteColor">
          <a-card size="small" title="南京基地" :bordered="false"  :bodyStyle="{height:'350px',maxHeight:'350px'}">
            <template slot="extra">
              <a-dropdown>
                <a  class="ant-dropdown-link menuA">
                  {{nanjingAreaName}}<a-icon type="down" />
                </a>
                <a-menu slot="overlay" @click="handleClickNanjing">
                  <a-menu-item class="menuA" v-for="item in nanjingAreaList" :key="item.id" :value="item.areaName">
                    {{item.areaName}}
                  </a-menu-item>
                </a-menu>
              </a-dropdown>
            </template>

            <p style="margin-left: 10px;font-weight: bold;">{{noTitleName}}: {{nanjingPeopleNumber}} 人</p>

            <!--自定义加载中-->
            <div class="zhezhaoBase" v-if="loadingNanjing">
              <a-spin tip="加载中...">
              </a-spin>
            </div>
            <!--柱状图-->
            <div style="width: 100%;height: 200px;text-align: center;line-height: 200px" v-if="nanjingData == null">
              {{errorMessageNanjing}}
            </div>

            <div v-else id="containerNanjing" class="chartzhu" style="height: 300px"></div>
          </a-card>
        </div>
      </a-col>

      <a-col class="gutter-row" :span="suzhouSpan"  v-show="suzhougShow">
        <div class="gutter-box whiteColor">
          <a-card size="small" title="苏州基地" :bordered="false"  :bodyStyle="{height:'350px',maxHeight:'350px'}">
            <template slot="extra">
              <a-dropdown>
                <a  class="ant-dropdown-link menuA">
                  {{suzhouAreaName}}<a-icon type="down" />
                </a>
                <a-menu slot="overlay" @click="handleClickSuzhou">
                  <a-menu-item class="menuA" v-for="item in suzhouAreaList" :key="item.id" :value="item.areaName">
                    {{item.areaName}}
                  </a-menu-item>
                </a-menu>
              </a-dropdown>
            </template>

            <p style="margin-left: 10px;font-weight: bold;">{{noTitleName}}: {{suzhouPeopleNumber}} 人</p>

            <!--自定义加载中-->
            <div class="zhezhaoBase" v-if="loadingSuzhou">
              <a-spin tip="加载中...">
              </a-spin>
            </div>
            <!--柱状图-->
            <div style="width: 100%;height: 200px;text-align: center;line-height: 200px" v-if="suzhouData == null">
              {{errorMessageSuzhou}}
            </div>

            <div v-else id="containerSuzhou" class="chartzhu" style="height: 300px"></div>
          </a-card>
        </div>
      </a-col>

      <!--<a-col class="gutter-row" :span="0" v-show="xiangtanShow">-->
        <!--<div class="gutter-box whiteColor">-->
          <!--<a-card size="small" title="湘潭基地" :bordered="false">-->
            <!--<div class="areaNotOpened" style="height: 231px">-->
              <!--该区域暂未开通-->
            <!--</div>-->
          <!--</a-card>-->
        <!--</div>-->
      <!--</a-col>-->

    </a-row>






  </div>
</template>

<script>
  import reservationApi from "@/api/reservation";
  import adminsDefinitionApi from "@/api/visitorSystem/adminsDefinition";
  import { registerTheme,Chart } from '@antv/g2';
  import moment from "moment";
  registerTheme('newTheme', {minColumnWidth:10,maxColumnWidth:10});

  export default {
    components: {

    },
    name:'',
    data() {
      return {
        isSuper:"是",  //是否是超级管理员
        loaded: 1,   // 1第一次加载，  2第二次加载
        loadingAllPosition: true,
        loadingAll: false,
        nowMonthDate: moment(new Date(), 'YYYY-MM'),
        errorMessageAll:"响应错误",
        tabListNoTitle: [
          // {
          //   key: '1',
          //   tab: '预约总人数',
          // },
          {
            key: '2',
            tab: '到访总人数',
          },
          // {
          //   key: '3',
          //   tab: '未审批总人数',
          // },
        ],
        key: 'tab1',
        noTitleKey: '2',
        noTitleName: '到访总人数',
        dataAll5Number: 0,
        dataAll5 : [],
        allSpan:24,
        allDataShow:true,
        height: 420,
        chartDataAll: null,  //总数据图形对象--多个基地时
        allMessageNull: "", //总数据为空

        // 安亭模块
        loadingAnting: false,
        aningAreaAll:[],
        antingAreaName:"全部",
        antingAreaId: "",
        antingShow:true,
        antingPeopleNumber: 0,
        antingData5 : [],
        errorMessageAnting:"",
        antingChart7: null,  //安亭数据图形对象
        antingSpan:12,

        // 银川模块
        yinchuanAreaList:[],
        yinchuanAreaName:"全部",
        yinchuanAreaId: "",
        yinchanPeopleNumber: 0,
        loadingYinchuan: false,
        errorMessageYinchuan:"",
        yinchuanData1:[],//柱形图数据
        yinchuanChart: null,  //柱形图对象
        yinchuanShow: true,
        yinchuanSpan:12,

        // 太仓模块
        taicangData : [],
        taicangAreaList:[],
        taicangAreaName:"全部",
        taicangAreaId: "",
        taicangPeopleNumber: 0,
        loadingTaicang: false,
        errorMessageTaicang:"",
        taicangData1:[],   //柱形图数据
        taicangChart: null,  //柱形图对象
        taicangShow: true,
        taicangSpan:12,

        // 湘潭模块
        xiangtanShow: true,
        xiangtanData : [],
        xiangtanAreaList:[],
        xiangtanAreaName:"全部",
        xiangtanAreaId: "",
        xiangtanPeopleNumber: 0,
        loadingXiangtan: false,
        errorMessageXiangtan:"",
        xiangtanChart: null,  //柱形图对象
        xiangtanSpan:12,

        // 南京模块 20005
        nanjingShow: true,
        nanjingData : [],
        nanjingAreaList:[],
        nanjingAreaName:"全部",
        nanjingAreaId: "",
        nanjingPeopleNumber: 0,
        loadingNanjing: false,
        errorMessageNanjing:"",
        nanjingChart: null,  //柱形图对象
        nanjingSpan:12,

        // 苏州模块 20006
        suzhougShow: true,
        suzhouData : [],
        suzhouAreaList:[],
        suzhouAreaName:"全部",
        suzhouAreaId: "",
        suzhouPeopleNumber: 0,
        loadingSuzhou: false,
        errorMessageSuzhou:"",
        suzhouChart: null,  //柱形图对象
        suzhouSpan:12,


        baceType: [],   //所有基地

        allDataArr:[
          {
            huizongdata:[{"date":1,"value":13},{"date":2,"value":21},{"date":3,"value":15},{"date":4,"value":30},{"date":5,"value":21},{"date":6,"value":93},{"date":7,"value":75},{"date":8,"value":61},{"date":9,"value":25},{"date":10,"value":109},{"date":11,"value":99},{"date":12,"value":95},{"date":13,"value":73},{"date":14,"value":65},{"date":15,"value":21},{"date":16,"value":23},{"date":17,"value":70},{"date":18,"value":89},{"date":19,"value":83},{"date":20,"value":88},{"date":21,"value":131},{"date":22,"value":31},{"date":23,"value":26},{"date":24,"value":83},{"date":25,"value":94},{"date":26,"value":96},{"date":27,"value":86},{"date":28,"value":102},{"date":29,"value":26},{"date":30,"value":29},{"date":31,"value":68}],
            total:729,
            id: 100000
          },
          {
            antingData5:[{"date":1,"value":0},{"date":2,"value":0},{"date":3,"value":0},{"date":4,"value":0},{"date":5,"value":0},{"date":6,"value":0},{"date":7,"value":0},{"date":8,"value":0},{"date":9,"value":0},{"date":10,"value":0},{"date":11,"value":0},{"date":12,"value":0},{"date":13,"value":0},{"date":14,"value":0},{"date":15,"value":0},{"date":16,"value":0},{"date":17,"value":0},{"date":18,"value":0},{"date":19,"value":0},{"date":20,"value":0},{"date":21,"value":0},{"date":22,"value":0},{"date":23,"value":0},{"date":24,"value":0},{"date":25,"value":0},{"date":26,"value":0},{"date":27,"value":0},{"date":28,"value":0},{"date":29,"value":0},{"date":30,"value":0},{"date":31,"value":0}],
            aningAreaAll:[{areaName: "全部", id: ""},{"id":1,"baseId":100,"areaName":"办公区域","isDelete":0,"englishName":"Office Area","isHaveDoor":0},{"id":2,"baseId":100,"areaName":"测试实验室","isDelete":0,"englishName":"Test Lab","isHaveDoor":0}],
            total:729,
            id: 100
          },
          {
            taicangData5: [],
            taicangAreaList:[{areaName: "全部", id: ""},{"id":5,"baseId":20003,"areaName":"一厂","isDelete":0,"englishName":"Plant 1","isHaveDoor":0},{"id":6,"baseId":20003,"areaName":"二厂","isDelete":0,"englishName":"Plant 2","isHaveDoor":1},{"id":7,"baseId":20003,"areaName":"三厂","isDelete":0,"englishName":"Plant 3","isHaveDoor":1},{"id":8,"baseId":20003,"areaName":"四厂","isDelete":0,"englishName":"Plant 4","isHaveDoor":1},{"id":9,"baseId":20003,"areaName":"五厂","isDelete":0,"englishName":"Plant 5","isHaveDoor":1},{"id":10,"baseId":20003,"areaName":"SMB","isDelete":0,"englishName":"SMB","isHaveDoor":0},{"id":11,"baseId":20003,"areaName":"东仓路","isDelete":0,"englishName":"Dongcang Rd.","isHaveDoor":0},{"id":15,"baseId":20003,"areaName":"新一厂","isDelete":0,"englishName":"New Plant 1","isHaveDoor":1}],
            total:0,
            id: 20003
          },
          {
            yinchuanData5: [],
            yinchuanAreaList:[{areaName: "全部", id: ""},{"id":5,"baseId":20003,"areaName":"一厂","isDelete":0,"englishName":"Plant 1","isHaveDoor":0},{"id":6,"baseId":20003,"areaName":"二厂","isDelete":0,"englishName":"Plant 2","isHaveDoor":1},{"id":7,"baseId":20003,"areaName":"三厂","isDelete":0,"englishName":"Plant 3","isHaveDoor":1},{"id":8,"baseId":20003,"areaName":"四厂","isDelete":0,"englishName":"Plant 4","isHaveDoor":1},{"id":9,"baseId":20003,"areaName":"五厂","isDelete":0,"englishName":"Plant 5","isHaveDoor":1},{"id":10,"baseId":20003,"areaName":"SMB","isDelete":0,"englishName":"SMB","isHaveDoor":0},{"id":11,"baseId":20003,"areaName":"东仓路","isDelete":0,"englishName":"Dongcang Rd.","isHaveDoor":0},{"id":15,"baseId":20003,"areaName":"新一厂","isDelete":0,"englishName":"New Plant 1","isHaveDoor":1}],
            total:0,
            id: 102
          },
        ]

      }
    },
     beforeMount(){

    },
    mounted() {
      let _this = this;
      // this.getAllVisitCases()
      this.pieChartDatasAll();
      this.pieChart1();
      this.pieChartYinchuan();
      this.pieChartTaicang();
      this.pieChartXiangtan();
      this.pieChartNanjing();
      this.pieChartSuzhou();
      this.$nextTick(async()=>{
        await _this.checkIsSuper();
      })
    },
    methods: {
      //查询登陆人是否是超级管理员
      checkIsSuper() {
        adminsDefinitionApi.checkIsSuper().then(res=>{
          // console.log(res);
          if (res && res.data.success) {
            this.isSuper = res.data.result.isSuper;
            // 获取基地信息
            this.findRegionList();
          } else {
            this.$message.error(res.data.message);
          }
        })
      },
      // 根据权限获取基地信息
      async findRegionList() {
        let that = this;
        this.loadingAllPosition = true;
        let resp = await reservationApi.getBdSysItemList({typeId: 200});
        // console.log(resp.data);
        if (resp && resp.data.success) {
          this.baceType = resp.data.result;
          let ids = this.baceType.map(el=>{return el.id});
          // console.log(ids);
          // console.log(this.isSuper);
          if (this.baceType.length == 0 || this.baceType == null){
            // 隐藏所有模块
            this.dataAll5 = [];
            this.antingData5 =[];
            this.taicangData1 =[];
            this.yinchuanData1 =[];
            this.xiangtanData =[];
            this.nanjingData =[];
            this.suzhouData =[];
            // this.allDataShow = false;
            // this.antingShow = false;
            // this.taicangShow = false;
            // this.yinchuanShow = false;
            this.allMessageNull = "未获取到可用数据";
          } else {
            // console.log(this.dataAll5);
            if (ids.length > 0 && this.isSuper == '是'){
              // this.getAllVisitCases();
              this.allDataShow = true;
            } else {
              this.allDataShow = false;
            }
            for (let i = 0; i < this.baceType.length; i++) {
              let item = this.baceType[i];
              if (ids.indexOf(100) > -1){
                if(item.id == 100){
                  // this.getAntingVisitCases();
                  this.getAntingAreaList();
                  this.antingSpan = 12;
                  this.antingShow = true;
                }
              } else {
                this.antingShow = false;
              }
              if(ids.indexOf(20003) > -1){
                if(item.id == 20003){
                  // this.getTaiCangVisitCases();
                  this.getTaicangAreaList();
                  this.taicangSpan = 12;
                  this.taicangShow = true;
                }
              } else {
                this.taicangShow = false;
              }
              if(ids.indexOf(102) > -1){
                if(item.id == 102){
                  // this.getYinchuanVisitCases();
                  this.getYinchuanAreaList();
                  this.yinchuanSpan = 12;
                  this.yinchuanShow = true;
                }
              } else {
                this.yinchuanShow = false;
              }
              if(ids.indexOf(20004) > -1){
                if(item.id == 20004){
                  // this.getXiangtanVisitCases();
                  this.getXiangtanAreaList();
                  this.xiangtanSpan = 12;
                  this.xiangtanShow = true;
                }
              } else {
                this.xiangtanShow = false;
              }
              if(ids.indexOf(20005) > -1){
                if(item.id == 20005){
                  // this.getXiangtanVisitCases();
                  this.getNanjingAreaList();
                  this.nanjingSpan = 12;
                  this.nanjingShow = true;
                }
              } else {
                this.nanjingShow = false;
              }
              if(ids.indexOf(20006) > -1){
                if(item.id == 20006){
                  // this.getXiangtanVisitCases();
                  this.getSuzhouAreaList();
                  this.suzhouSpan = 12;
                  this.suzhougShow = true;
                }
              } else {
                this.suzhougShow = false;
              }

            }
          }

          this.$nextTick(()=>{
            this.changeTerm();
            that.loadingAllPosition = false;
            // setTimeout(()=>{
            //   that.loadingAllPosition = false;
            // },2000)
          })

        } else {
          this.loadingAllPosition = false;
          this.allMessageNull = resp.data.message;
          // this.$message.error(resp.data.message);
        }
      },

      // 获取安亭基地的区域
      async getAntingAreaList(){
        let res = await reservationApi.getVisitorTypeAreaList({typeId: 100})
        // console.log(res.data);
        if (res.data.success){
          this.aningAreaAll = [{areaName: "全部", id: ""}];
          this.aningAreaAll = [...this.aningAreaAll,...res.data.result];
          // this.aningAreaAll = res.data.result;
          // this.antingAreaName = res.data.result[0].areaName;
          // this.antingAreaId = res.data.result[0].id;
          // console.log(this.antingAreaId);
        } else {
          this.$message.error(res.data.message);
        }
      },
      // 获取银川基地的区域
      async getYinchuanAreaList(){
        let res = await reservationApi.getVisitorTypeAreaList({typeId: 102})
        // console.log(res.data);
        if (res.data.success){
          this.yinchuanAreaList = [{areaName: "全部", id: ""}];
          this.yinchuanAreaList = [...this.yinchuanAreaList,...res.data.result];
          // this.yinchuanAreaList = res.data.result;
          // this.yinchuanAreaName = res.data.result[0].areaName;
          // this.yinchuanAreaId = res.data.result[0].id;
          // console.log(this.yinchuanAreaId);
        } else {
          this.$message.error(res.data.message);
        }
      },
      // 获取太仓基地的区域
      async getTaicangAreaList(){
        let res = await reservationApi.getVisitorTypeAreaList({typeId: 20003})
        // console.log(res.data);
        if (res.data.success){
          this.taicangAreaList = [{areaName: "全部", id: ""}];
          this.taicangAreaList = [...this.taicangAreaList,...res.data.result];
          // this.taicangAreaList = res.data.result;
          // this.taicangAreaName = res.data.result[0].areaName;
          // this.taicangAreaId = res.data.result[0].id;
          // console.log(this.taicangAreaId);
        } else {
          this.$message.error(res.data.message);
        }
      },
      // 获取湘潭基地的区域
      async getXiangtanAreaList(){
        let res = await reservationApi.getVisitorTypeAreaList({typeId: 20004})
        // console.log(res.data);
        if (res.data.success){
          this.xiangtanAreaList = [{areaName: "全部", id: ""}];
          this.xiangtanAreaList = [...this.xiangtanAreaList,...res.data.result];
        } else {
          this.$message.error(res.data.message);
        }
      },
      // 获取南京基地的区域
      async getNanjingAreaList(){
        let res = await reservationApi.getVisitorTypeAreaList({typeId: 20005})
        // console.log(res.data);
        if (res.data.success){
          this.nanjingAreaList = [{areaName: "全部", id: ""}];
          this.nanjingAreaList = [...this.nanjingAreaList,...res.data.result];
        } else {
          this.$message.error(res.data.message);
        }
      },
      // 获取苏州基地的区域
      async getSuzhouAreaList(){
        let res = await reservationApi.getVisitorTypeAreaList({typeId: 20006})
        // console.log(res.data);
        if (res.data.success){
          this.suzhouAreaList = [{areaName: "全部", id: ""}];
          this.suzhouAreaList = [...this.suzhouAreaList,...res.data.result];
        } else {
          this.$message.error(res.data.message);
        }
      },

      clickNowMonth(){
        // console.log(moment(this.nowMonthDate).format('YYYY-MM'))
        this.nowMonthDate = moment(new Date(), 'YYYY-MM');
        this.changeTerm();
      },
      // 安亭基地切换区域
       handleClick(e) {
        // console.log(e);
        this.antingAreaName = e.item.value;
        this.antingAreaId = e.key;
         this.getAntingVisitCases();
        // this.antingChart7.data(this.antingData5);
        // this.antingChart7.render();
      },
      // 银川基地切换区域
      handleClickYinchuan(e) {
        // console.log(e);
       this.yinchuanAreaName = e.item.value;
       this.yinchuanAreaId = e.key;
         this.getYinchuanVisitCases();
        // this.yinchuanChart.data(this.yinchuanData1);
        // this.yinchuanChart.render();
      },

      // 银川基地切换区域
        handleClickTaicang(e) {
          // console.log(e);
          this.taicangAreaName = e.item.value;
          this.taicangAreaId = e.key;
          this.getTaiCangVisitCases();
        },
      // 湘潭基地切换区域
      handleClickXiangtan(e) {
        // console.log(e);
        this.xiangtanAreaName = e.item.value;
        this.xiangtanAreaId = e.key;
        this.getXiangtanVisitCases();
      },
      // 南京基地切换区域
      handleClickNanjing(e) {
        this.nanjingAreaName = e.item.value;
        this.nanjingAreaId = e.key;
        this.getNanjingVisitCases();
      },
      // 苏州基地切换区域
      handleClickSuzhou(e) {
        this.suzhouAreaName = e.item.value;
        this.suzhouAreaId = e.key;
        this.getSuzhouVisitCases();
      },

      // 获取安亭基地数据
      async getAntingVisitCases() {
        // console.log(this.antingAreaId)
        this.loadingAnting = true;
        let params = {
          visitBaseId : 100,
          visitAreaId: this.antingAreaId,
          yearMonth: moment(this.nowMonthDate).format('YYYY-MM'),
          lx: this.noTitleKey   //类型1、2、3分别于tab的名称对应
        };
        let resp = await reservationApi.getVisitorVisitGraphs(params);
        // console.log(resp.data);
        if (resp.data.success) {
          this.antingData5 = resp.data.result.data;
          this.antingPeopleNumber = resp.data.result.total;
          this.loadingAnting = false;
          this.antingChart7.data(this.antingData5);
          this.antingChart7.render();
        } else {
          this.loadingAnting = false;
          this.antingData5 = null;
          this.errorMessageAnting = resp.data.message;
          // this.$message.error(resp.data.message);
        }
      },
      // 获取银川基地数据
      async getYinchuanVisitCases() {
        // console.log(this.yinchuanAreaId)
        this.loadingYinchuan = true;
        let params = {
          visitBaseId : 102,
          visitAreaId: this.yinchuanAreaId,
          yearMonth: moment(this.nowMonthDate).format('YYYY-MM'),
          lx: this.noTitleKey   //类型1、2、3分别于tab的名称对应
        };
        let resp = await reservationApi.getVisitorVisitGraphs(params);
        // console.log(resp.data);
        if (resp.data.success) {
          this.yinchuanData1 = resp.data.result.data;
          this.yinchanPeopleNumber = resp.data.result.total;
          this.loadingYinchuan = false;
          this.yinchuanChart.data(this.yinchuanData1);
          this.yinchuanChart.render();
        } else {
          this.loadingYinchuan = false;
          this.yinchuanData1 = null;
          this.errorMessageYinchuan = resp.data.message;
          // this.$message.error(resp.data.message);
        }
      },
      // 获取湘潭基地数据
      async getXiangtanVisitCases() {
        // console.log(this.yinchuanAreaId)
        this.loadingXiangtan = true;
        let params = {
          visitBaseId : 20004,
          visitAreaId: this.xiangtanAreaId,
          yearMonth: moment(this.nowMonthDate).format('YYYY-MM'),
          lx: this.noTitleKey   //类型1、2、3分别于tab的名称对应
        };
        let resp = await reservationApi.getVisitorVisitGraphs(params);
        // console.log(resp.data);
        if (resp.data.success) {
          this.xiangtanData = resp.data.result.data;
          this.xiangtanPeopleNumber = resp.data.result.total;
          this.loadingXiangtan = false;
          this.xiangtanChart.data(this.xiangtanData);
          this.xiangtanChart.render();
        } else {
          this.loadingXiangtan = false;
          this.xiangtanData = null;
          this.errorMessageXiangtan = resp.data.message;
          // this.$message.error(resp.data.message);
        }
      },
      // 获取南京基地数据
      async getNanjingVisitCases() {
        this.loadingNanjing = true;
        let params = {
          visitBaseId : 20005,
          visitAreaId: this.nanjingAreaId,
          yearMonth: moment(this.nowMonthDate).format('YYYY-MM'),
          lx: this.noTitleKey   //类型1、2、3分别于tab的名称对应
        };
        let resp = await reservationApi.getVisitorVisitGraphs(params);
        // console.log(resp.data);
        if (resp.data.success) {
          this.nanjingData = resp.data.result.data;
          this.nanjingPeopleNumber = resp.data.result.total;
          this.loadingNanjing = false;
          this.nanjingChart.data(this.nanjingData);
          this.nanjingChart.render();
        } else {
          this.loadingNanjing = false;
          this.nanjingData = null;
          this.errorMessageNanjing = resp.data.message;
          // this.$message.error(resp.data.message);
        }
      },
      // 获取苏州基地数据
      async getSuzhouVisitCases() {
        this.loadingSuzhou = true;
        let params = {
          visitBaseId : 20006,
          visitAreaId: this.suzhouAreaId,
          yearMonth: moment(this.nowMonthDate).format('YYYY-MM'),
          lx: this.noTitleKey   //类型1、2、3分别于tab的名称对应
        };
        let resp = await reservationApi.getVisitorVisitGraphs(params);
        // console.log(resp.data);
        if (resp.data.success) {
          this.suzhouData = resp.data.result.data;
          this.suzhouPeopleNumber = resp.data.result.total;
          this.loadingSuzhou = false;
          this.suzhouChart.data(this.suzhouData);
          this.suzhouChart.render();
        } else {
          this.loadingSuzhou = false;
          this.suzhouData = null;
          this.errorMessageSuzhou = resp.data.message;
          // this.$message.error(resp.data.message);
        }
      },

      // 获取所有基地数据
      async getAllVisitCases() {
        this.loadingAll = true;
        let params = {
          visitBaseId : "",
          visitAreaId: "",
          yearMonth: moment(this.nowMonthDate).format('YYYY-MM'),
          lx: this.noTitleKey   //类型1、2、3分别于tab的名称对应
        };
        let resp = await reservationApi.getVisitorVisitGraphs(params);
        // console.log(resp.data);
        if (resp.data.success) {
          this.dataAll5 = [];
          this.dataAll5 = resp.data.result.data;
          this.dataAll5Number = resp.data.result.total;
          this.loadingAll = false;
          this.chartDataAll.data(this.dataAll5);
          this.chartDataAll.render();
        } else {
          this.loadingAll = false;
          this.dataAll5 = [];
          this.errorMessageAll = resp.data.message;
          // this.$message.error(resp.data.message);
        }
      },
      // 获取太仓基地数据
      async getTaiCangVisitCases() {
        // console.log(this.taicangAreaId)
        this.loadingTaicang = true;
        let params = {
          visitBaseId : 20003,
          visitAreaId: this.taicangAreaId,
          yearMonth: moment(this.nowMonthDate).format('YYYY-MM'),
          lx: this.noTitleKey   //类型1、2、3分别于tab的名称对应
        };
        let resp = await reservationApi.getVisitorVisitGraphs(params);
        // console.log(resp.data);
        if (resp.data.success) {
          this.taicangData1 = resp.data.result.data;
          this.taicangPeopleNumber = resp.data.result.total;
          this.loadingTaicang = false;
          this.taicangChart.data(this.taicangData1);
          this.taicangChart.render();
        } else {
          this.loadingTaicang = false;
          this.taicangData1 = null;
          this.errorMessageTaicang = resp.data.message;
          // this.$message.error(resp.data.message);
        }
      },
      // 更换查询条件
       changeTerm() {
         if (this.allDataShow && this.isSuper == '是'){
           this.loadingAll = true;
           this.getAllVisitCases();
         }
         if (this.antingShow){
           this.loadingAnting = true;
           this.getAntingVisitCases();
         }
         if (this.taicangShow){
           this.loadingTaicang = true;
           this.getTaiCangVisitCases();
         }
         if (this.yinchuanShow){
           this.loadingYinchuan = true;
           this.getYinchuanVisitCases();
         }
         if (this.xiangtanShow){
           this.loadingXiangtan = true;
           this.getXiangtanVisitCases();
         }
         if (this.nanjingShow){
           this.loadingNanjing = true;
           this.getNanjingVisitCases();
         }
         if (this.suzhougShow){
           this.loadingSuzhou = true;
           this.getSuzhouVisitCases();
         }

      },
      // 安亭访客数据柱状图
      pieChart1() {
        const chart = new Chart({
          container: 'container',
          autoFit: true,
          height: 300,
          padding: 30,
        });
        this.antingChart7 = chart;
        chart.data(this.antingData5);
        chart.scale('value', {
          nice: true,
        });
        chart.axis('date', {
          tickLine: null,
        });

        chart.axis('value', {
          label: {
            formatter: (val) => {
              return  " " + " " + " " + val
            },
          },
        });

        chart.tooltip(false);
        chart.interaction('element-active');
        chart.theme('newTheme')
        chart.legend(false);
        chart
          .interval()
          .position('date*value')
          .color('date', (val) => {
            return '#009900';
          })
          .label('value', {
            offset: 10,
          });

        chart.render();

      },
      // 银川数据柱状图
      pieChartYinchuan() {
        const chart = new Chart({
          container: 'containerYinchuan',
          autoFit: true,
          height: 300,
          padding: 30,
        });
        this.yinchuanChart = chart;
        chart.data(this.yinchuanData1);
        chart.scale('value', {
          nice: true,
        });
        chart.axis('date', {
          tickLine: null,
        });

        chart.axis('value', {
          label: {
            formatter: (val) => {
              return  " " + " " + " " + val
            },
          },
        });

        chart.tooltip(false);
        chart.interaction('element-active');
        chart.theme('newTheme')
        chart.legend(false);
        chart
          .interval()
          .position('date*value')
          .color('date', (val) => {
            return '#009900';
          })
          .label('value', {
            offset: 10,
          });

        chart.render();

      },
      // 太仓数据柱状图
      pieChartTaicang() {
        const chart = new Chart({
          container: 'containerTc',
          autoFit: true,
          height: 300,
          padding: 30,
        });
        this.taicangChart = chart;
        chart.data(this.taicangData1);
        chart.scale('value', {
          nice: true,
        });
        chart.axis('date', {
          tickLine: null,
        });

        chart.axis('value', {
          label: {
            formatter: (val) => {
              return  " " + " " + " " + val
            },
          },
        });

        chart.tooltip(false);
        chart.interaction('element-active');
        chart.theme('newTheme')
        chart.legend(false);
        chart
          .interval()
          .position('date*value')
          .color('date', (val) => {
            return '#009900';
          })
          .label('value', {
            offset: 10,
          });

        chart.render();

      },
      // 湘潭数据柱状图
      pieChartXiangtan() {
        // console.log(this.xiangtanData);
        const chart = new Chart({
          container: 'containerXiangtan',
          autoFit: true,
          height: 300,
          padding: 30,
        });
        this.xiangtanChart = chart;
        chart.data(this.xiangtanData);
        chart.scale('value', {
          nice: true,
        });
        chart.axis('date', {
          tickLine: null,
        });

        chart.axis('value', {
          label: {
            formatter: (val) => {
              return  " " + " " + " " + val
            },
          },
        });

        chart.tooltip(false);
        chart.interaction('element-active');
        chart.theme('newTheme')
        chart.legend(false);
        chart
          .interval()
          .position('date*value')
          .color('date', (val) => {
            return '#009900';
          })
          .label('value', {
            offset: 10,
          });

        chart.render();

      },
      // 南京数据柱状图
      pieChartNanjing() {
        const chart = new Chart({
          container: 'containerNanjing',
          autoFit: true,
          height: 300,
          padding: 30,
        });
        this.nanjingChart = chart;
        chart.data(this.nanjingData);
        chart.scale('value', {
          nice: true,
        });
        chart.axis('date', {
          tickLine: null,
        });
        chart.axis('value', {
          label: {
            formatter: (val) => {
              return  " " + " " + " " + val
            },
          },
        });
        chart.tooltip(false);
        chart.interaction('element-active');
        chart.theme('newTheme')
        chart.legend(false);
        chart
          .interval()
          .position('date*value')
          .color('date', (val) => {
            return '#009900';
          })
          .label('value', {
            offset: 10,
          });
        chart.render();
      },
      // 苏州数据柱状图
      pieChartSuzhou() {
        const chart = new Chart({
          container: 'containerSuzhou',
          autoFit: true,
          height: 300,
          padding: 30,
        });
        this.suzhouChart = chart;
        chart.data(this.suzhouData);
        chart.scale('value', {
          nice: true,
        });
        chart.axis('date', {
          tickLine: null,
        });
        chart.axis('value', {
          label: {
            formatter: (val) => {
              return  " " + " " + " " + val
            },
          },
        });
        chart.tooltip(false);
        chart.interaction('element-active');
        chart.theme('newTheme')
        chart.legend(false);
        chart
          .interval()
          .position('date*value')
          .color('date', (val) => {
            return '#009900';
          })
          .label('value', {
            offset: 10,
          });
        chart.render();
      },

  // 全部基地访客数据柱状图--预约总人数
  pieChartDatasAll() {
        // console.log(this.dataAll5);
    const chart = new Chart({
      container: 'datasAll',
      autoFit: true,
      height: this.height,
      padding: 30,
    });
    this.chartDataAll = chart;
    chart.data(this.dataAll5);
    chart.scale('value', {
      nice: true,
    });
    chart.axis('date', {
      tickLine: null,
    });

    chart.axis('value', {
      label: {
        formatter: (val) => {
          return " " + " " + " " + val
        },
      },
    });

    chart.tooltip(false);
    chart.interaction('element-active');
    chart.theme('newTheme')
    chart.legend(false);
    chart
      .interval()
      .position('date*value')
      .color('date', (val) => {
        return '#009900';
      })
      .label('value', {
        offset: 10,
      });

    chart.render();

  },

      // 切换tab
      onTabChange(key) {
        this.noTitleKey = key;
        this.noTitleName = this.tabListNoTitle.filter(el=>{ return el.key == key})[0].tab;
        // console.log(this.noTitleName);
        this.changeTerm();

      },
      onChangeDate(date, dateString) {
        // console.log(date, dateString);
        this.nowMonthDate = date;
        this.changeTerm();
      },




    },
  }
</script>
